<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>项目</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<script src="bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.css"></script>
<script src="style/js/jquery-1.11.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.js"></script>
<script src="bootstrap-3.3.7-dist/js/locales/bootstrap-datetimepicker.fr.js"></script>


<style type="text/css">
#toprow {
	
}

#topcolumn {
	padding: 0px;
}

.container {
	margin: 0px;
	width: 100%;
	height:100%;
}

.leftbutton {
	margin: 0px;	
	padding-top:10px;
	padding-bottom:50px;
	padding-left:20px;
	cursor: pointer;
}

.leftbutton:hover {
	background-color: #46A3FF	
}

.buttoncss {
	float: left;
	
	/* margin-top:10px;
	margin-bottom:10px;
	margin-left:20px; */
}

.buttoncss:hover {
	background-color: #46A3FF
}

.buttonword{
	margin-left:10px;
	margin-top:8px;
 	height:40px;
	color:#FFFFFF;
	float: right;
}


</style>
<script type="text/javascript">
$(function(){
	$('#createproject').modal('hide');
	//$("#notice").function(){
	
	$.post("shownprojects.do",
				{
				},function(data){
					html="";
					for (var i = 0; i < data.length; i++){
						html+="<button id='projectid-"+data[i].projectid+"' class='btn joinedproject' type='button' onclick='getprojtectdetail("+data[i].projectid+")'>"+data[i].projectname+"</button>"
					}
					$("#joinedprojects").empty();
					$("#joinedprojects").append(html);
					
				},"json" 
		); 	
		
		
	//}
//-------------------初始加载事件↑--------------------------表单↓---------------------------------------------------

	
	
	$('#submitproject').click(function(){
		$.post("createproject.do",
				{
					projectname:$('#projectname').val(),
			     	description:$('#description').val(),
				},function(data){
					alert(data);
					if(data){
						alert("创建成功!");
					}else{
						alert("创建失败!");
					}
				},"json" 
		); 
	});
	

	

	
//---------------任务↑---------------------------活动↓-------------------------------------	
});

function getprojtectdetail(text){
	$("#projectdetail").load("gotoprojectdetail.do?projectid="+text);
}

</script>

</head>
<body>
	<div class="container">
		<!-- 顶部导航栏 -->
		<div id="toprow" class="row clearfix">
			<div id="topcolumn" class="col-md-12 column">
				<nav style="margin: 0px" class="navbar navbar-default"
					role="navigation">
					<div class="navbar-header">
						<img style="width: 75px; height: 40px"
							src="style/image/ateamlogo.png">
						<!-- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Brand</a> -->
					</div>

					<div class="collapse navbar-collapse"
						id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li><h4>${currentCompany.companyname}</h4></li>
						</ul>

						<ul class="nav navbar-nav navbar-right">
							<li>
								<form class="navbar-form navbar-left" role="search">
									<div class="form-group">
										<input type="text" class="form-control" />
									</div>
									<button type="submit" class="btn btn-default">Submit</button>
								</form>
							</li>
							<li>
								<c:if test="${currentUser.role == 1}">
							 <button onclick="javascript:location.href='getapplyers.do'" class="btn btn-small" type="button">申请</button>
							 	</c:if>
							 	<c:if test="${currentUser.role == 2}">
							 <button onclick="javascript:location.href='getapplyers.do'" style="display:none;" class="btn btn-small disabled" type="button">申请</button>
							 	</c:if>
							 </li>
							 <li>
							<button onclick="javascript:location.href='logout.do'" class="btn btn-success" type="button">注销</button>
							</li>
						</ul>
					</div>

				</nav>
			</div>
		</div>

		<!-- 主体 -->
		<div class="row clearfix">
			<!-- 左边的按钮列表 -->
			<div style="padding: 0px; margin-bottom:0px;background-color: #84C1FF"
				class="col-md-1 column">
				<div onclick="javascript:location.href='userinfo.jsp'" style="padding:5px;height:180px" class="leftbutton"><div><img style="height:100px;width:100px;cursor: pointer;" src="${currentUser.head}"><h1>${currentUser.username}</h1></div></div>
				<div class="leftbutton" onclick="javascript:location.href='home.jsp'" ><div class="buttoncss"><img src="style/image/ico/动态.png"><div class="buttonword">动态</div></div></div>
				<div class="leftbutton" onclick="javascript:location.href='backlog.jsp'"><div class="buttoncss"><img src="style/image/ico/待办.png"><div class="buttonword">待办</div></div></div>
				<div class="leftbutton" style="background-color: #46A3FF"><div class="buttoncss"><img src="style/image/ico/项目.png"><div class="buttonword">项目</div></div></div>
				<div class="leftbutton" onclick="javascript:location.href='group.jsp'"><div class="buttoncss"><img src="style/image/ico/小组.png"><div class="buttonword">小组</div></div></div>
				<div class="leftbutton" onclick="javascript:location.href='getcolleagues.do'"><div class="buttoncss"><img src="style/image/ico/同事.png"><div class="buttonword">同事</div></div></div>
				<div class="leftbutton" onclick="javascript:location.href='approval.jsp'"><div class="buttoncss"><img src="style/image/ico/审批.png"><div class="buttonword">审批</div></div></div>
				<div class="leftbutton" onclick="javascript:location.href='gotochart.do'"><div class="buttoncss"><img src="style/image/ico/报表.png"><div class="buttonword">报表</div></div></div>
			</div>

			<!-- 右边的内容  这里修改了bootstrap.css中关于滚动条的长度-->
			<div class="col-md-11 column pre-scrollable">
				<!-- 项目的左边 -->
				<div id="projectdetail"
					style="width: 80%; display: block; float: left;padding-right:10px">
					<h1>从右侧选择已加入的项目或创建新项目</h1>
					
				</div>

				<!-- 项目的右边 -->
				<div style="width: 20%; display: block; float: left">
					 <button id="createproject" class="btn btn-large btn-primary" 
					 data-toggle="modal" data-target="#createprojectModal" type="button"><h2>创建一个项目</h2></button>
				<h3>已加入的项目</h3>
				<div id="joinedprojects"></div>
				
				</div>
				<div class="modal fade" id="createprojectModal" tabindex="-1" role="dialog"
								aria-labelledby="createprojectLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal"
												aria-hidden="true">&times;</button>
											<h4 class="modal-title" id="createprojectLabel">输入项目名称</h4>
										</div>
										<div class="modal-body">
											<div class="form-group">
												<label for="name">项目名称</label>
												<input name="projectname"
					   							id="projectname" type="text" class="form-control"
												placeholder="请输入项目名称">
											</div>
											<div class="form-group">
												<label for="name">项目简介</label>
												<textarea name="description" id="description"
												class="form-control" rows="3"></textarea>
											</div>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-default"
												data-dismiss="modal">关闭</button>
											<button type="button" class="btn btn-primary" id="submitproject"
											>提交</button>
										</div>
									</div>
									<!-- /.modal-content -->
								</div>
								<!-- /.modal -->
							</div>
				
			</div>
		</div>
	</div>
</body>
</html>